<template>
  <el-dialog
    class="dialog-box"
    v-model="dialogVisible"
    :title="!dialogParam.title ? '弹出框' : dialogParam.title"
    :destroy-on-close="true"
    width="1200px"
    @close="handleCancel"
  >
    <div>
      <div class="max-h-60vh overflow-auto">
        <el-row :gutter="20" justify="center" style="margin: 0">
          <el-col
            :span="6"
            v-for="(item, index) in listData"
            :key="index"
            class="p-b-4"
          >
            <el-card @click="clickRow(item)" class="hover:shadow-2xl">
              <div
                v-if="item.recommend == '1'"
                class="suggest-tag bg-red-500 rotate-45 text-center text-white p-y-2 font-black shadow-lg"
              >
                建议
              </div>
              <div :class="['h-2', rowCalss(item)]"></div>
              <div :class="['p-6', rowCalss1(item)]">
                <div>
                  <div class="text-2xl text-center font-black p-b-2">
                    {{ item.name }}
                  </div>
                  <div
                    class="text-xl text-center font-black p-b-2"
                    v-if="item.remark"
                  >
                    ({{ item.remark }})
                  </div>
                  <div class="text-xl text-center font-black p-b-2" v-else>
                    　
                  </div>
                </div>
                <div>
                  <div
                    class="text-3xl text-center font-black flex justify-center items-end text-red-500"
                  >
                    ￥{{ item.price }}
                    <div class="text-xl flex justify-center">
                      /
                      <dict-drop
                        :options="examine_frequency"
                        :value="item.unit"
                      ></dict-drop>
                    </div>
                  </div>
                </div>

                <div
                  v-for="(equityItem, equityIndex) in item.equityList"
                  :key="equityIndex"
                >
                  <div
                    class="text-xl text-center font-black title border border-b-solid border-b-gray-100 p-3"
                  >
                    {{ equityItem.name }}
                  </div>
                  <div class="m-t-3">
                    <div
                      class="text-lg p-b-2"
                      v-for="(childItem, childIndex) in equityItem.children"
                      :key="childIndex"
                    >
                      <span
                        class="text-orange-400 align-middle text-xs h-4 w-4 inline-flex justify-center items-center"
                        v-if="childItem.have"
                        ><CircleCheck
                      /></span>
                      <span
                        class="text-slate-400 align-middle text-xs h-4 w-4 inline-flex justify-center items-center"
                        v-else
                        ><CircleClose
                      /></span>
                      <span class="align-middle p-l-2">
                        {{ childItem.name }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <pagination
        class="relative"
        v-show="total > 4"
        :total="total"
        :autoScroll="false"
        :page-sizes="[4, 8, 12, 16]"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleAffirm"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup name="SelectVIP">
import { getCurrentInstance, nextTick, watchEffect } from 'vue'
import { listMemberDetails } from '@/api/rightsManage/index'

import { useDict } from '@/utils/dict'
import { strToArr } from '@/utils/commo'
import useCommonStore from '@/store/modules/common'
const { proxy } = getCurrentInstance()

const { examine_frequency } = useDict('examine_frequency')

// 接受父级传递的参数
const props = defineProps({
  dialogParam: {
    required: true,
    type: Object || Array,
    default: () => {
      return {}
    }
  }
})

// 选中的数据
const selectData = ref([])
// 弹出框是否隐藏
const dialogVisible = ref(false)
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 4
  },
  loading: false,
  total: 0,
  listData: []
})
let { queryParams, loading, total, listData } = toRefs(data)
//设置参数
const dialogObj = reactive({})

// 初始化
watch(
  () => props.dialogParam,
  async () => {
    dialogVisible.value = props.dialogParam.open // 表单弹出框
    queryParams.value = {
      ...queryParams.value,
      ...props.dialogParam.queryParams
    } // 检索条件
    if (dialogVisible.value) {
      getList()
    }
  },
  {
    // flush: 'post'
    immediate: true,
    deep: true
  }
)

/* 获取列表 */
async function getList() {
  loading.value = true
  let res = await listMemberDetails(queryParams.value)
  loading.value = false
  if (res.code !== 200) return
  listData.value = res.rows
  total.value = res.total
  console.log(res, 'res')
}

// 点击行
function clickRow(row) {
  let select = selectData.value.filter(e => e.id == row.id) //判断点击的数据是否在列表中
  if (select.length == 0) {
    selectData.value[0] = row
  } else {
    selectData.value.splice(selectData.value.indexOf(row.id), 1)
  }
  // console.log('点击==>', selectData.value)
}

// 选中行样式
const rowCalss = row => {
  let select = selectData.value.filter(e => e.id == row.id)
  return select.length > 0 ? 'bg-blue-500' : 'bg-black'
}
// const rowCalss = computed(() => {
//   return function (row) {
//     let select = selectData.value.filter(e => e.id == row.id)
//     return select.length > 0 ? 'bg-blue-500' : 'bg-black'
//   }
// })
// 选中行样式
const rowCalss1 = row => {
  let select = selectData.value.filter(e => e.id == row.id)
  return select.length > 0 ? 'border-solid border-2 border-blue-500' : ''
}
// const rowCalss1 = computed(() => {
//   return function (row) {
//     let select = selectData.value.filter(e => e.id == row.id)
//     return select.length > 0 ? 'border-solid border-2 border-blue-500' : ''
//   }
// })

const emit = defineEmits(['ok', 'close'])
// 确认操作
const handleAffirm = () => {
  let sData = [...selectData.value]
  emit('ok', {
    ...props.dialogParam,
    selectData: sData
    // dialogVisible: false
  })
  reset()
}
// 取消操作
const handleCancel = () => {
  reset()
  emit('close')
  dialogVisible.value = false
}
const reset = () => {
  // dialogVisible.value = false
  dialogObj.data = []
  selectData.value = []
  dialogObj.defaultCheckedKeys = []
}

function init() {
  // getList()
}
</script>
<style lang="scss" scoped>
.dialog-box {
  .el-card {
    :deep(.el-card__body) {
      position: relative;
      overflow: hidden;
      padding: 0 !important;

      .suggest-tag {
        position: absolute;
        right: -30px;
        top: 10px;
        padding-left: 40px;
        padding-right: 40px;
      }
    }
  }
}
</style>
<style lang="scss">
.dialog-box {
  .el-dialog__body {
    padding-bottom: 10px !important;
  }
}
</style>
